import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:untitled/widgets/common_image.dart';

/*搜素组件*/

class SearchBar extends StatefulWidget {
  final bool showLocation; //是否显示位置按钮
  final Function goBackCallback; //回退按钮函数为空就不显示回退按钮
  final String inputValue; //搜索输入框值
  final String defaultInputValue; //搜索框默认值
  final Function onCancel; //取消按钮
  final bool showMap; //显示地图按钮
  final Function onSearch; //用户点击搜索框触发，为空就不显示，主要是跳转到搜素页面
  final ValueChanged<String> onSearchSubmit;//提交搜索，主要是搜索

  const SearchBar(
      {Key key,
      this.showLocation,
      this.goBackCallback,
      this.inputValue = '',
      this.defaultInputValue = '请输入搜索词',
      this.onCancel,
      this.showMap,
      this.onSearch,
      this.onSearchSubmit})
      : super(key: key); //用户输入搜索词后，点击键盘的搜索键触发

  @override
  _SearchBarState createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {
  String _searchWord = ''; //输入框内容
  TextEditingController _controller;
  //焦点对象
  FocusNode _focus;

  @override
  void initState() {
    _controller = TextEditingController(text: widget.inputValue);
    _focus = FocusNode();
    super.initState();
  }

  void _onClean() {
    _controller.clear();
    setState(() {
      _searchWord = '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          //没初始化就为空
          if (widget.showLocation != null)
            GestureDetector(
                onTap: () {},
                child: Padding(
                  padding: EdgeInsets.only(right: 10.0),
                  child: Row(
                    children: [
                      Icon(
                        Icons.room,
                        color: Colors.green,
                        size: 16.0,
                      ),
                      Text(
                        '北京',
                        style: TextStyle(color: Colors.black, fontSize: 14.0),
                      ),
                    ],
                  ),
                )),
          //返回按钮
          if (widget.goBackCallback != null)
            GestureDetector(
                onTap: widget.goBackCallback,
                child: Padding(
                  padding: EdgeInsets.only(right: 10.0),
                  child: Icon(
                    Icons.chevron_left,
                    color: Colors.black87,
                  ),
                )),
          //搜素框
          Expanded(
              child: Container(
            height: 34.0,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(17.0),
                color: Colors.grey[200]), //[200]表示透明度
            padding: EdgeInsets.only(right: 10.0),
            child: TextField(
              controller: _controller,
              focusNode: _focus,//设置焦点对象
              onTap: (){
                if(null == widget.onSearchSubmit){
                  _focus.unfocus();//失去焦点
                }

                widget.onSearch();
              },

              onSubmitted: widget.onSearchSubmit,
              textInputAction: TextInputAction.search,//让键盘上的确认按钮变为搜索
              style: TextStyle(fontSize: 14.0),
              onChanged: (String value) {//输入值改变回调
                setState(() {
                  _searchWord = value;
                });
              },
              decoration: InputDecoration(
                  border: InputBorder.none,
                  //去除TextField原本边框样式
                  hintText: '请输入搜索词',
                  contentPadding: EdgeInsets.only(top: 0.5),
                  //内容间距
                  hintStyle: TextStyle(
                    color: Colors.grey,
                    fontSize: 14.0,
                  ),
                  //输入框前面图标，如果觉得文字输入区域离前面图标远可以使用icon代替prefixIcon
                  prefixIcon: Icon(
                    Icons.search,
                    size: 18.0,
                    color: Colors.grey,
                  ),
                  suffixIcon: GestureDetector(
                    onTap: (){
                      _onClean();
                    },
                    child: Icon(
                      Icons.clear,
                      size: 18.0,
                      color: _searchWord == ''?Colors.grey[200]:Colors.grey,
                    ), //输入框后面图标,
                  )),
            ),
          )),
          if (widget.onCancel != null)
            GestureDetector(
                onTap: widget.onCancel,
                child: Padding(
                  padding: EdgeInsets.only(right: 10.0),
                  child: Text('取消',
                      style: TextStyle(fontSize: 14.0, color: Colors.black)),
                )),
          if (widget.showMap != null)
            CommonImage(src: 'static/icons/widget_search_bar_map.png')
        ],
      ),
    );
  }
}
